<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register</title>
<link href="references/css/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<link href="references/css/ribbon.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css"
	href="references/css/font-awesome.min.css">
<script src="references/js/jquery-2.1.0.min.js"></script>
<script>
	$(function() {
		$("#email").attr("pattern", "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$");
		$("#email").attr("required", "");
		$("#password").attr("required", "");
		$("#username").attr("required", "");
		$("#name").attr("required", "");
	});
	function checkPass() {
		//Store the password field objects into variables ...
		var pass1 = document.getElementById('password');
		var pass2 = document.getElementById('re-password');
		//Store the Confimation Message Object ...
		var message = document.getElementById('confirmMessage');
		//Set the colors we will be using ...
		var goodColor = "#66cc66";
		var badColor = "#ff6666";
		//Compare the values in the password field 
		//and the confirmation field
		if (pass1.value == pass2.value) {
			//The passwords match. 
			//Set the color to the good color and inform
			//the user that they have entered the correct password 
			pass2.style.backgroundColor = goodColor;
			message.style.color = goodColor;
			message.innerHTML = "Passwords Match!"
			return true;
		} else {
			//The passwords do not match.
			//Set the color to the bad color and
			//notify the user.
			pass2.style.backgroundColor = badColor;
			message.style.color = badColor;
			message.innerHTML = "Passwords Do Not Match!"
			return false;
		}
	}
</script>
</head>
<body>


	
			<div
				class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
				<html:form action="/register" method="post"
		onsubmit="return checkPass();">
					<h2>
						Please Sign Up <small>It's free and always will be.</small>
					</h2>
					
					<div class="modal-content">
							
								<div class="modal-body">


									<hr class="colorgraph">

									<div class="form-group">
										<html:text property="username" styleId="username"
											styleClass="form-control input-lg"></html:text>
										<br>

									</div>

									<div class="row">
										<div class="col-xs-6 col-sm-6 col-md-6">
											<div class="form-group">
												<html:password property="password" styleId="password"
													styleClass="form-control input-lg"></html:password>
											</div>
										</div>
										<div class="col-xs-6 col-sm-6 col-md-6">
											<div class="form-group">
												<input type="password" id="re-password" required
													onkeyup="checkPass(); return false;"
													class="form-control input-lg"
													placeholder="Confirm Password">

											</div>
										</div>
									</div>

									<div class="form-group">
										<html:text property="email" styleId="email1"
											styleClass="form-control input-lg"></html:text>

									</div>
									<div class="form-group">
										<html:text property="name" styleId="name"
											styleClass="form-control input-lg"></html:text>
										<br>
									</div>
									<div class="row">
										<div class="col-xs-3 col-sm-3 col-md-3">
											<span class="button-checkbox">
												<button type="button" class="btn" data-color="info"
													tabindex="7">I Agree</button> <input type="checkbox"
												name="t_and_c" id="t_and_c" class="hidden" value="1">
											</span>
										</div>
										<div class="col-xs-9 col-sm-9 col-md-9">
											By clicking <strong class="label label-primary">Register</strong>,
											you agree to the <a href="#" data-toggle="modal"
												data-target="#t_and_c_m">Terms and Conditions</a> set out by
											this site, including our Cookie Use.
										</div>
									</div>

									<hr class="colorgraph">
									<span id="confirmMessage" class="confirmMessage"></span>

									<div class="error-message-register" id="error-message-register"></div>

									<logic:notEmpty name="ErrorInfo">
										<bean:write name="ErrorInfo" />
									</logic:notEmpty>


								</div>
								<div class="modal-footer">
									
									<html:submit styleClass="btn btn-success">Register</html:submit>

								</div>
							</div>
				</html:form>
			</div>
	
	
</body>
</html>